// 实例化一个Vuex
import Vuex from 'vuex'
import Vue from 'vue'
import user from '@/store/modules/user'
import setting from '@/store/modules/setting'

// 注册Vuex的功能, Vue.use的方法实际上是调用了Vuex中一个install的方法
Vue.use(Vuex)
const store = new Vuex.Store({
  // 实例化Vuex的构造参数 state mutations actions
  state: {
    // 存储的状态
    vuexCount: 0,
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    vuexObj: {
      name: 'vuexObj',
      version: 1
    }
  },
  // 这个getters类似计算属性, 数据源头为state中的数据
  getters: {
    // 放置的所有Vuex的计算属性
    // state 指的就是, 当前store中的state
    filterList: (state) => {
      return state.list.filter(item => item > 5)
    },
    token: state => state.user.token,
    name: state => state.setting.name
  },
  // 修改state必须通过mutations
  mutations: {
    // 修改state的mutation方法
    // 每一个mutation方法都有对应的参数
    // state 指的是当前Vuex中的state对象
    // payload 载荷 提交mutation的方法的时候, 传递的参数, 它可以是任何形式的. 任何类型的值
    addCount (state, payload) {
      state.vuexCount += payload
    }
  },
  // 异步动作
  // 从后端获取一个数, 更新到state中count中
  actions: {
    // action方法参数
    // 第一个参数 执行的上下文对象
    // context 相当于组件中 this.$store, store的运行实例
    // 接受一个与store实例具有相同方法和属性context对象, 但不是store实例本身
    getAsyncCount (context, params) {
      // 使用 setTimeout 模拟做异步请求
      setTimeout(() => {
        context.commit('addCount', params)
      }, 1000)
    }
  },
  // 放置子模块的属性
  modules: {
    user,
    setting
  }
})

export default store
